<script setup>
import '../assets/iconfont.css';
</script>

<template>
  <div class="sidebar-container">
    <el-menu
      :default-active="$route.path"
      class="sidebar-menu"
      :collapse="isCollapse"
      router
      :collapse-transition="false"
      background-color="#ffffff"
      text-color="#333333"
      active-text-color="#4caf50">

      <div v-for="item in userMenuList" :key="item.id">
        <div v-if="item.path">
          <div v-if="!item.pid">
            <el-menu-item :index="item.path">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </div>
        </div>
        <div v-else>
          <el-submenu :index="item.id + ''">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <div v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.path">
                <i :class="subItem.icon"></i>
                <span>{{ subItem.name }}</span>
              </el-menu-item>
            </div>
          </el-submenu>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
import {setRoutes} from "@/router";
import Request from '../utils/request.js'

export default {
    name: 'Aside',
    props: {
        isCollapse: {
            type: Boolean,
            default: false
        }
    },
    components: {},
    created() {
        let userMenuListStr = localStorage.getItem("userMenuList")
        this.userMenuList = userMenuListStr ? JSON.parse(userMenuListStr) : [];
        this.userInfo = localStorage.getItem("backUser") ? JSON.parse(localStorage.getItem("backUser")) : {};
        
        // 如果没有菜单数据，则使用默认菜单
        if (this.userMenuList.length === 0) {
            this.userMenuList = this.defaultMenuList;
        }
    },
    data() {
        return {
            userMenuList: [],
            userInfo: {},
            path: this.$route.path,
            defaultMenuList: [
                {
                    id: '1',
                    name: '控制面板',
                    path: '/dashboard',
                    icon: 'el-icon-s-platform'
                },
                {
                    id: '2',
                    name: '农产品管理',
                    icon: 'el-icon-s-goods',
                    children: [
                        {
                            id: '2-1',
                            name: '产品列表',
                            path: '/products',
                            icon: 'el-icon-shopping-bag-1'
                        },
                        {
                            id: '2-2',
                            name: '产品分类',
                            path: '/categories',
                            icon: 'el-icon-collection'
                        },
                        {
                            id: '2-3',
                            name: '库存管理',
                            path: '/inventory',
                            icon: 'el-icon-box'
                        }
                    ]
                },
                {
                    id: '3',
                    name: '订单管理',
                    icon: 'el-icon-s-order',
                    children: [
                        {
                            id: '3-1',
                            name: '订单列表',
                            path: '/orders',
                            icon: 'el-icon-tickets'
                        },
                        {
                            id: '3-2',
                            name: '退款管理',
                            path: '/refunds',
                            icon: 'el-icon-money'
                        }
                    ]
                },
                {
                    id: '4',
                    name: '用户管理',
                    icon: 'el-icon-user',
                    children: [
                        {
                            id: '4-1',
                            name: '用户列表',
                            path: '/users',
                            icon: 'el-icon-user-solid'
                        },
                        {
                            id: '4-2',
                            name: '用户等级',
                            path: '/user-levels',
                            icon: 'el-icon-medal'
                        }
                    ]
                },
                {
                    id: '5',
                    name: '金融服务',
                    icon: 'el-icon-bank-card',
                    children: [
                        {
                            id: '5-1',
                            name: '贷款申请',
                            path: '/loans',
                            icon: 'el-icon-document'
                        },
                        {
                            id: '5-2',
                            name: '支付管理',
                            path: '/payments',
                            icon: 'el-icon-wallet'
                        }
                    ]
                },
                {
                    id: '6',
                    name: '数据统计',
                    icon: 'el-icon-data-line',
                    children: [
                        {
                            id: '6-1',
                            name: '销售统计',
                            path: '/sales-stats',
                            icon: 'el-icon-s-data'
                        },
                        {
                            id: '6-2',
                            name: '用户分析',
                            path: '/user-analytics',
                            icon: 'el-icon-pie-chart'
                        }
                    ]
                },
                {
                    id: '7',
                    name: '系统设置',
                    path: '/settings',
                    icon: 'el-icon-setting'
                }
            ]
        }
    },
    methods: {
        refreshMenu(){
            Request.get("/menu/getMenuTree/"+this.userInfo.id).then(response => {
                if (response.code === '0') {
                    localStorage.setItem("userMenuList", JSON.stringify(response.data))
                    setRoutes();
                } else {
                    this.$message({
                        type: 'error',
                        message: response.msg
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.sidebar-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-menu {
    border-right: none;
    height: 100%;
}

.sidebar-menu:not(.el-menu--collapse) {
    width: 220px;
}

.el-menu--collapse {
    width: 64px;
}

.el-menu-item {
    height: 50px;
    line-height: 50px;
    margin: 4px 0;
    border-radius: 4px;
    color: #333333;
    font-size: 14px;
    transition: all 0.3s;
}

.el-menu-item:hover {
    color: #4caf50;
    background-color: rgba(76, 175, 80, 0.1) !important;
}

.el-menu-item.is-active {
    color: #ffffff;
    background-color: #4caf50 !important;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.el-menu-item [class^="el-icon-"] {
    font-size: 18px;
    margin-right: 10px;
    color: #666;
    transition: color 0.3s;
}

.el-menu-item:hover [class^="el-icon-"] {
    color: #4caf50;
}

.el-menu-item.is-active [class^="el-icon-"] {
    color: #ffffff;
}

/* 子菜单标题样式 */
.el-submenu >>> .el-submenu__title {
    height: 50px;
    line-height: 50px;
    margin: 4px 0;
    border-radius: 4px;
    color: #333333;
    font-size: 14px;
}

.el-submenu >>> .el-submenu__title:hover {
    color: #4caf50;
    background-color: rgba(76, 175, 80, 0.1) !important;
}

.el-submenu >>> .el-submenu__title [class^="el-icon-"] {
    color: #666;
}

.el-submenu >>> .el-submenu__title:hover [class^="el-icon-"] {
    color: #4caf50;
}

/* 子菜单内容样式 */
.el-submenu >>> .el-menu--inline {
    padding-left: 0;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin: 4px 0;
}

.el-submenu >>> .el-menu--inline .el-menu-item {
    height: 45px;
    line-height: 45px;
    padding-left: 48px !important;
    background-color: transparent;
    border-radius: 4px;
    margin: 2px 0;
}

.el-submenu >>> .el-menu--inline .el-menu-item:hover {
    color: #4caf50;
    background-color: rgba(76, 175, 80, 0.1) !important;
}

.el-submenu >>> .el-menu--inline .el-menu-item.is-active {
    color: #ffffff;
    background-color: #4caf50 !important;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

/* 折叠菜单样式 */
.el-menu--collapse .el-submenu >>> .el-submenu__title span {
    display: none;
}

.el-menu--collapse .el-submenu >>> .el-submenu__title .el-submenu__icon-arrow {
    display: none;
}

.el-menu--collapse .el-menu-item span {
    display: none;
}
</style>